<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/yanzhengma.css">
    <style>
        body,html{
            min-width: 1500px;
        }
         #Box{
            width:100%;
        }
        h1{
           height:68px;
           width: 99.5%;
           padding-left: 0.5%;
           background: #ffffff;
        }
        h1 img{
            width: 11.16%;
            height:50px;
            margin-top: 9px;
            margin-bottom: 9px;
        }
        .main{
            width:100%;
            height:650px;
            background: url("img/thbg.png")no-repeat 0px 0px;
            background-size:100% 100%;
            position:relative;
        }
        .main .login{
            width:35.8%;
            height:590px;
            background: #ffffff;
            border-radius: 5px;
            margin-left:32.3%;
            float: left;
            margin-top:30px;
        }
        .login form{
            margin-left:20%;
            margin-top:40px;
            position: relative;
        }
        .login form del{
           text-decoration: none;
            float:left;
            width:80px;
            font-size:12px;
            text-align: right;
            vertical-align: middle;
            color:#606266;
            line-height: 40px;
            padding:0px 12px 0px 0px;
            box-sizing: border-box;
            margin-left:-40px;
        }
        .login form .Inp1{
            width: 80%;
            border-radius: 5px;
            border:1px solid #cccccc;
            margin-left:10%; 
        }
        .login form #Inp1{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            outline: none;
        }
        .login form #empName{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            
            outline: none;
        }
        input{
            text-indent: 1.5em;
            /* float:left; */
        }
        .login form #telphone{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            
            outline: none;
        }
        .login form #password{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            outline: none;
        }
        .login form #email{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            outline: none;
        }
        .login form #qr_pass{
            width:70%;
            height:40px;
            border-radius:5px;
            border: 0px;
            outline: none;
        }
        .login form .Inp2{
            margin-top:25px;
        }
        .login form .Inp3{
            margin-top:25px;
        }
        .login form .Inp4{
            margin-top:25px;
        }
        .login form .Inp5{
            margin-top:25px;
        }
        .login form .Inp6{
            margin-top:25px;
            width:25%;
            margin-left:11%;
        }
        form .Graph{
            position: relative;
            height:40px;
            margin-left:-5px;
        }
        form .Graph .yanzhengtu{
            position: absolute;
            left:45%;
            top:0px;
            width:60%;
        }
        .Graph .yanzhengtu span{
            width:40%;
            height:40px;
            border:1px solid #cccccc;
            border-radius: 5px;
            display:inline-block;
        }
        .Graph .yanzhengtu .canvas{
            color:#000;
            display: inline-block;
            font-size:10px;
            text-decoration:underline;
        }
        .login form .Inp7{
            margin-top:25px;
            width: 77%;
            margin-left:11%;
        }
        
        .login form .getMa{
            height:36px;
            width:27%;
            background: #498e3d;
            font:15px/36px "simhei";
            display:block;
            float: right;
            color:#ffffff;
            text-align: center;
           margin-top:2px;
           margin-right:2px;
           border-radius: 5px;
        }
        ul .L1{
            font-size:10px;
            color:#666666;
            margin-top:20px;
            margin-bottom: 10px;
        }
        ul .L1 input{
           /* margin-top:20px; */
           margin-left: 15%;
        }
        form del em{
            color:#f56c6c;
        }
        .bottom{
            width:100%;
            height:36px;
            text-align: center;
            line-height: 36px;
        }
        .error {
            color: red;
            font-size:10px;
         }
         input[type = 'submit']{
            float: left;
            width:30%;
            height:40px;
            margin-top:10px;
            margin-left:8%;
            text-indent: 0em;
            border:1px solid #cccccc;
            background:#3590e6;
            border-radius: 5px;
            text-align: center;
            font: 20px/40px "幼圆";
            color:#ffffff;
         }
         .zhezhuni{
            position:absolute;
            bottom:-60px;
            left:8%;
            width:30%;
            height:40px;
            border:1px solid #cccccc;
            background:#a0cfff;
            border-radius: 5px;
            text-align: center;
            font: 20px/40px "幼圆";
            color:#ffffff;
         }
         input[type = 'reset']{
            float: left;
            width:30%;
            height:40px;
            text-indent: 0em;
            margin-top:10px;
            margin-left:9%;
            border:1px solid #cccccc;
            background:#ffffff;
            border-radius: 5px;
            font: 20px/40px "幼圆";
            color: #000000;
         }
        .success{
            position: absolute;
            left: 32.3%;
            top:200px;
            width:35.8%;
            height:300px;
            background:#ffffff;
            border-radius:5px;
            display: none;
            z-index: 10;
        }
        .success .ZCsucess{
            width:100%;
            text-align:center;
            height:50px;
            font-size:25px;
            line-height: 50px;
            margin-top:80px;
        }
        .success input{
             margin-left:35%;
             background:#498e3d;
             height:50px;
             line-height: 50px;
             font-size: 30px;
        }
        .mask{
            position:absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            z-index: 9;
            opacity: 0.5;
            display: none;
        }
        .login .code{
            margin-top:25px;
            position: relative;
        }
        .login .code .input-val{
            margin-left:2%;
            font-size:14px;
            
        }
        .login .code a{
            color: #000000;
            font-size:11px;
            text-decoration: underline;
            position: absolute;
            left:310px;
            width:30%; 
            margin-top:30px;
            display: inline-block;
        }
        form .PHyanzheng{
            margin-top:25px;
        }
        .Graph #canvas{
            margin-left: -40px;
        }
        /* ul .L1 span{
            margin-top:10px;
            display: inline-block;
        } */
        input[type="checkbox"] {
            width: 12px;
            height: 12px;
            display: inline-block;
            vertical-align: middle;
            line-height: 12px;
            text-align: center;
            position: relative;
        }

        input[type="checkbox"]::before {
            content: " ";
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: #fff;
            width: 100%;
            height: 100%;
            border: 1px solid #dcdfe6;
            border-radius: 2px;
        }

        input[type="checkbox"]:checked::before {
            content: "\2713";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            color:#ffffff; 
            text-indent: 0px;
            background-color: #54a0ec;
            border: 1px solid #409eff;
            font-size: 12px;
        }

        input[type="checkbox"]:hover {
            border: 1px solid #409eff;
        }
        /* ul #checkbox{
            margin-top:;
        } */
    </style>
</head>
<body>
    <div class="mask"></div>
    <div id="Box">
        <h1><img src="img/logo.png" alt=""></h1>
        <div class="main">
           <div class="login">
               <form id="oneForm">
                   <div class="name" class="clear">
                       <del for="name">
                            <em>*</em>姓名
                        </del>
                        <div class="Inp1">
                           <input type="text"  placeholder="请输入姓名" id="empName" name="empName" autocomplete="off">
                       </div>
                   </div>
                   <div class="phoneId" class="clear">
                        <del for="phoneId" class="phoneId"><em>*</em>手机号</del>
                         <div class="Inp1 Inp2">
                            <input type="text"  placeholder="请输入手机号" id="telphone" name="telphone" autocomplete="off">
                        </div>
                    </div>
                    <div class="email" class="clear">
                            <del for="email" class=""><em>*</em>邮箱</del>
                             <div class="Inp1 Inp3">
                                <input type="email"  placeholder="请输入邮箱" id="email" name="email" autocomplete="off">
                            </div>
                        </div>
                    <div class="password" class="clear">
                        <del for="password"><em>*</em>密码</del>
                            <div class="Inp1 Inp4">
                            <input type="password"  placeholder="请输入密码" id="password" name="password">
                        </div>
                    </div>
                    <div class="confirm" class="clear">
                        
                        <del for="confirm" class="confirm"><em>*</em>确认密码</del>
                        <div class="Inp1 Inp5">
                            <input type="password"  placeholder="请确认密码" id="qr_pass" name="qr_pass">
                        </div>
                    </div>
                    <div class="Graph" class="clear">
                        <del for="Graph code" class="GraphCode"><em>*</em>验证码</del>
                        <div class="code" class="clear">
                            <input type="text"  placeholder="请输入验证码" class="input-val" name="inputVal" autocomplete="off">
                            <canvas id="canvas" width="100%" height="43"></canvas>
                            <!-- <button class="btn">提交</button> -->
                            <a class="canvas" href="javascript:void(0)">看不清，换一张</a>
                        </div>
                    </div>
                    <div class="clear" class="PHyanzheng">
                        <del for="Pvalidate" class="Pvalidate"> <em>*</em>手机验证码</del>
                        <div class="Inp1 Inp7">
                            <input type="text"  placeholder="请输入手机验证码" id="Inp1" autocomplete="off">
                            <span class="getMa">获取验证码</span>
                        </div>
                    </div>
                    <ul class="clear">
                        <li class="L1"><input type="checkbox" id="checkbox" name="checkbox"><span> 我已阅读并接受《量子矩阵服务使用协议》</span></li>
                    </ul>
                    <div class="zhezhuni">立即注册</div>
                    <div class="RegNow"><input type="submit" value="立即注册"></div>
                    
                    <div class="reset"><input type="reset" value="重置"></div>
            </form>
           </div>
        </div>
        <div class="success">
            <div class="ZCsucess">注册成功，请登录!</div>
           <input type="submit" value="登录">
        </div>
        <div class="bottom">量子矩阵公司 版权所有 Copyright@2018-2019 QUTO Corproation, All Rights Reserved</div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/yanzhengma.js"></script>
<script src="js/oApublic.js"></script>
<script src="js/messages_zh.js"></script>
<script>
    $('#checkbox').on('click',function(){
        if($('#checkbox').prop('checked') == true){
            $('.zhezhuni').css('display','none');
        }
       else{
        $('.zhezhuni').css('display','block')
       }
    })
   $('#oneForm').validate({
       rules:{
        empName:'required',
        checkbox:'required',
        inputVal:'required',
        telphone:{
            required: true,
            minlength:11,
            maxlength:11,
            isMobile:'true'
        },
        email:{
            required:true,
            minlength:6,
        },
        password: {
            required: true,
            minlength: 6,
            maxlength: 16,
        },
        qr_pass: {
            required: true,
            minlength: 6,
            maxlength: 16,
            equalTo: "#password"
        },
    },
        messages:{
            empName:"请输入正确名字",
            checkbox:'',
            inputVal:"请输入验证码",
            telphone:{
                required: '请输入手机号',
                mixlength:'请输入正确手机号',
                maxlength:'请输入正确手机号',
                isMobile:'请输入正确格式'
            },
            email:{
                required:'请输入邮箱',
                mixlength:'请检查邮箱号',
                
            },
            password:{
                required:'请输入密码',
                mixlength:'请输入6-16位字符',
                maxlength:'请输入6-16位字符',
            },
            qr_pass: {
                required: '请确认密码',
                minlength: '请输入6-16位字符',
                maxlength: '请输入6-16位字符',
                equalTo: '两次输入不一致'
            }
        },
        submitHandler: function() {
     $('.success').css('display','block'),
     $('.mask').css('display','block')
  }
   })
   $('.success input').on('click',function(){
    //    console.log($('#empName').val());
    //    console.log($('#telphone').val());
    //    console.log($('#email').val());
    //    console.log($('#password').val());
        $.ajax({
       url:Registerurl,
       type:'post',
       dataType:'json',
       data:{
        empName:$('#empName').val(),
        telphone:$('#telphone').val(),
        email:$('#email').val(),
        password:$('#password').val(),
       },
       success: function(data) {
           console.log(data)
       window.location = './Login.html';
     },
   })
   })
   // 手机号格式
   jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写手机号码");
</script>
</html>